<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 6px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
            background-image: url('./个人简历背景.jpeg');
            background-size: cover;
            background-position: center; 
        }
        th, td {
            border: 3px solid #c2c0c0;
            padding: 10px;
            text-align: left;
        }
        textarea {
            width: calc(100% - 26px); 
            height: 100px; 
            padding: 10px;
            margin-top: 10px;
            border: 3px solid #8f8c8c;
            border-radius: 4px;
        }
        #photoImg {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>个人简历</h1>
        <form action="#" method="post" id="resumeForm">
            <table>
                <tr>
                    <th>姓名</th>
                    <td><input type="text" maxlength="20" onmousedown="alert('最多可输入20个字');"title="最多可输入20个字" /></td>
                </tr>
                <tr>
                    <th>年龄</th>
                    <td><input type="text" name="age"  maxlength="3" /></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td title="只可选择男女">
                        <input type="radio" name="sex"  />男
                        <input type="radio" name="sex" />女
                    </td>
                </tr>
                <tr>
                    <th>头像</th>
                    <td>
                        <input type="file" id="fileInput" accept="image/jpeg, image/gif" onchange="previewImage(this)">
                        <img id="photoImg" width="100px" height="100px" style="display:block; margin: 10px auto;" />
                    </td>
               </tr>
               <tr>
                <th>技能点</th>
                <td>
                    <textarea id="skills" placeholder="输入您的技能点"></textarea>
                    <button type="button" onclick="saveSkillsAsText()">保存为txt</button>
                </td>
            </tr>
                <tr>
                    <th>基本信息</th>
                    <td>
                        姓名：[卢豫]<br>
                        联系方式：[13863799551]<br>
                        邮箱：[2157445738@qq.com]<br>
                        地址：[山东威海]<br><br>
                        教育背景<br>
                        [威海职业学院,大数据2班]<br>
                        [2024.9.1] - [至今]<br><br>
                        个人兴趣<br>
                        旅游,听音乐,DIY
                    </td>
                </tr>
                <tr>
                    <th>详细简历内容</th>
                    <td>
                        <textarea placeholder="在这里输入您的详细简历内容..."></textarea>
                    </td>
                </tr>
                <tr>
                    <th colspan="2" style="text-align:center;">
                        <button type="button" id="submitBtn" onclick="submitResume()">提交</button>
                        <button type="reset" id="resetBtn">重置</button>
                        <button type="button" id="printBtn" onclick="printResume()">打印为PDF</button>
                    </th>
                </tr>
            </table>
            
        </form>
    </div>
    <script>
        function previewImage(input) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('photoImg').src = e.target.result;
                }
                reader.readAsDataURL(file);
            } else {
        document.getElementById('photoImg').src = '';
    }
        }
        function previewImage(input) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('photoImg').src = e.target.result;
                }
                reader.readAsDataURL(file);
            } else {
                document.getElementById('photoImg').src = '';
            }
        }
        function saveSkillsAsText() {
            const skills = document.getElementById('skills').value;
            const blob = new Blob([skills], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'skills.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
      }
 
        document.getElementById('resumeForm').addEventListener('reset', function() {
    document.getElementById('photoImg').src = ''; // 重置头像
});
        function submitResume() {
    const ageInput = document.querySelector('input[name="age"]'); 
    const age = parseInt(ageInput.value, 10); 
    if (isNaN(age)) {
        alert("请输入有效的信息！");
        return;
    }
    if (age < 18) {
        alert("您未满18岁,不能报考！");
        return;
    } else if (age === 18) {
        alert("您18岁,属于青少年人群(18-25),可以报考");
    } else if (age <= 25) {
        alert("您属于青少年人群(18-25),可以报考");
    } else if (age <= 30) {
        alert("您属于青年人群(25-30),可以报考");
    } else if (age <= 50) {
        alert("您属于中年人群(30-50),可以报考");
    } else {
        alert("您属于中老年人群(50以上),可以报考");
    }
 
    alert("您已提交成功");
    window.location.href = "成功提交.html";
}
//打印保存
document.getElementById('printBtn').addEventListener('click', function() {
        window.print();
    });
    // 定义一个变量来存储定时器ID
    let inactivityTimer;
 
 // 定义无操作时间（毫秒）
 const INACTIVITY_TIME = 30000; // 30秒

 // 重置定时器函数
 function resetInactivityTimer() {
     // 如果定时器已经存在，先清除它
     if (inactivityTimer) {
         clearTimeout(inactivityTimer);
     }
     // 设置新的定时器
     inactivityTimer = setTimeout(function() {
         // 30秒后无操作，刷新并重置表单
         alert('由于您长时间未操作，表单已自动重置。');
         document.getElementById('resumeForm').reset();
         // 重置头像
         document.getElementById('photoImg').src = '';
         // 可能还需要添加其他重置逻辑，比如清除文本域等
     }, INACTIVITY_TIME);
 }

 // 监听表单中的输入事件来重置定时器
 document.getElementById('resumeForm').addEventListener('input', resetInactivityTimer);
 document.getElementById('resumeForm').addEventListener('change', resetInactivityTimer);
 document.getElementById('resumeForm').addEventListener('click', resetInactivityTimer);
 document.getElementById('resumeForm').addEventListener('keydown', resetInactivityTimer); // 监听键盘输入

 // 初始化定时器
 resetInactivityTimer();

 <!-- 个人简历.html 中的相关部分 -->
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        const source = getQueryParam('source');
        if (source) {
            const messageElement = document.createElement('p');
            messageElement.textContent = `您是从 <strong>${source}</strong> 页面跳转过来的。`;
            document.body.appendChild(messageElement); // 或者选择页面中的某个特定元素来附加这段信息
        }
    </script>
</body>
</html>